<template>
  <div class="app-container">
    <el-card style="width: 70%; margin: auto;">
      <el-row :gutter="20">
        <el-col :span="18">
          <h2 style="font-weight: bold; color: #409EFF;">入库单号 : {{ form.inventoryNumber }}</h2>
        </el-col>
        <el-col :span="6" style="text-align: right;">
          <el-button type="primary" @click="DetailClose()">关闭</el-button>
        </el-col>
      </el-row>

      <div class="info-row">
        <div class="info-item"><strong>制单人：</strong>{{ form.userNameZDR }}</div>
        <div class="info-item"><strong>制单时间：</strong>{{ parseTime(form.creationTime, '{y}-{m}-{d}') }}</div>
        <div class="info-item"><strong>所在部门：</strong>{{ form.deptName }}</div>
        <div class="info-item"><strong>入库类型：</strong><dict-tag :options="dict.type.py_instock_type"
            :value="form.inventoryType" /></div>
      </div>

      <div class="info-row">
        <div class="info-item"><strong>入库日期：</strong>{{ parseTime(form.inboundDate, '{y}-{m}-{d}') }}</div>
        <div class="info-item"><strong>供应商：</strong>{{ form.supplierName }}</div>
        <div class="info-item"><strong>交货人：</strong>{{ form.contactPerson }}</div>
      </div>

      <div class="info-row">
        <div class="info-item"><strong>联系方式：</strong>{{ form.contactNumber }}</div>
        <div class="info-item"><strong>仓库：</strong>{{ form.warehouseName }}</div>
        <div class="info-item"><strong>经办人：</strong>{{ form.userNameZDR }}</div>
      </div>

      <div class="info-row">
        <div class="info-item"><strong>单据状态：</strong><dict-tag :options="dict.type.py_documents_status"
            :value="form.status" /></div>
        <div class="info-item"><strong>备注：</strong>{{ form.remark }}</div>
      </div>
    </el-card>

    <el-card style="width: 70%; margin: 20px auto;">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="1">其他信息</el-menu-item>
        <el-menu-item index="2">入库明细</el-menu-item>
      </el-menu>
      <div v-if="activeIndex === '1'">
        <h2>附件</h2>
        <ul class="file-list">
          <li v-for="file in fileList" :key="file.fileName">
            <a :href="file.filePath">{{ file.fileName }}</a>
          </li>
        </ul>
      </div>
      <div v-if="activeIndex === '2'">
        <el-table :data="tableData" style="width: 100%; margin-top: 20px;">
          <el-table-column fixed label="序号" align="center" prop="index" width="80"    />


          <el-table-column prop="productNames" label="货品名称" width="180"></el-table-column>
          <el-table-column prop="productCode" label="货品编号" width="180"></el-table-column>
          <el-table-column prop="productTypeName" label="货品类型" width="120"></el-table-column>
          <el-table-column prop="productModel" label="规格型号" width="120"></el-table-column>
          <el-table-column prop="productUnit" label="单位" width="120">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.py_product_unit" :value="scope.row.productUnit" />
            </template>
          </el-table-column>
          <el-table-column prop="locationName" label="入库库位" width="120"></el-table-column>
          <el-table-column prop="inboundPrice" label="入库单价" width="120"></el-table-column>
          <el-table-column prop="quantityThisTime" label="入库数量" width="120"></el-table-column>
          <el-table-column prop="inboundAmount" label="入库金额" width="120"></el-table-column>
          <el-table-column prop="inventoryValue" label="入库前库存" width="120"></el-table-column>
          <el-table-column prop="rkhkc" label="入库后库存" width="120"></el-table-column>
          <el-table-column prop="batchNumber" label="批次号" width="100"></el-table-column>
          <el-table-column prop="remarks" label="备注" width="120"></el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import { parseTime } from "../../../../utils/ruoyi";
import { selectAllPyInboundDetalisBycodeXQ } from "@/api/inbound/inbound";

export default {
  name: "Purchase",
  dicts: ['py_documents_status', 'py_instock_type', 'py_product_unit'],
  data() {
    return {
      tableData: [],
      fileList: [],
      activeIndex: '1',

      form: {}
    };
  },
  created() {
    this.form = this.$route.query.inbound;
    // Uncomment the following lines to fetch additional information if needed

    selectAllPyInboundDetalisBycodeXQ(this.form.inventoryNumber).then(response => {
      console.log('新增后端响应:', JSON.stringify(response, null, 2));
      // this.fileList = re.fileList;
      // this.tableData = response.data;
      this.tableData = response.data.map((item, index) => ({
        ...item,
        index: index + 1
      }));
    });
  },
  methods: {
    parseTime,
    DetailClose() {
      this.$router.push({ path: '/inout/inbound' });
    },
    handleSelect(key) {
      this.activeIndex = key;
    }
  }
};
</script>

<style>
.info-item {
  background-color: #f9f9f9;
  /* 背景色 */
  border: 1px solid #e4e7ed;
  /* 边框 */
  border-radius: 4px;
  /* 圆角 */
  padding: 10px;
  /* 内边距 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  /* 阴影效果 */
}

h2 {
  margin-bottom: 20px;
  /* 标题底部间距 */
}

.file-list {
  list-style: none;
  padding: 0;
}

.file-list li {
  margin: 5px 0;
}
</style>
